<template>
    <div>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="date" label="日期" width="180" />
            <el-table-column prop="name" label="总金额" width="180" />
            <el-table-column prop="address" label="患者数量" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" >诊断报告</el-button>
                    <el-button link type="primary" icon="Delete" @click="dialogTableVisible = true" >评价</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog v-model="dialogTableVisible" title="Shipping address" width="800">
            <el-table :data="gridData.splice(0,1)">
                <el-table-column property="date" label="日期" width="150" />
                <el-table-column property="name" label="Name" width="200" />
                <el-table-column property="address" label="评价" />
                <el-table-column property="star" label="星级" />
            </el-table>
        </el-dialog>

        <el-dialog v-model="dialogTableVisible1" title="诊断报告" width="800">
            <el-table :data="gridData1">
                <el-table-column property="date" label="Date" width="150" />
                <el-table-column property="name" label="Name" width="200" />
                <el-table-column property="address" label="Address" />
            </el-table>
        </el-dialog>
    </div>
</template>

<script setup name="ShowDetails">
import { reactive, ref } from 'vue'
const dialogTableVisible = ref(false)

    const tableData = [
        {
            date: '2016-05-03',
            name: '123123',
            address: '1231231',
        },
        {
            date: '2016-05-02',
            name: '432423',
            address: '23232',
        },
        {
            date: '2016-05-04',
            name: '2312313',
            address: '211',
        },
        {
            date: '2016-05-01',
            name: '63343333',
            address: '59',
        },
    ]
const dialogTableVisible1 = ref(false)

const gridData1 = [
        {
            date: '2016-05-03',
            name: '专三',
            address: '1231231',
        },
        {
            date: '2016-05-02',
            name: '19',
            address: '23232',
        },
        {
            date: '2016-05-04',
            name: '感冒',
            address: '211',
        },
        {
            date: '2016-05-01',
            name: '感冒了',
            address: '59',
        },
    ]

    const gridData = [
        {
            date: '2016-05-02',
            name: 'John Smith',
            address: '666',
            star: '五星好评',
        },
        {
            date: '2016-05-04',
            name: 'John Smith',
            address: '还行',
            star: '四星好评',
        },
        {
            date: '2016-05-01',
            name: 'John Smith',
            address: '不仅没好，更严重了',
            star: '一星好评',
        },
        {
            date: '2016-05-03',
            name: 'John Smith',
            address: '非常好',
            star: '五星好评',
        },
    ]
    function handleUpdate(row) {
        dialogTableVisible1.value = true
    }


</script>
<style scoped>

</style>
